<template>
  <div class="q-analysis">
    <div v-for="(title, index) in titles" :key="title" class="q-box">
      <q-box
        anaType="all"
        :title="title"
        :remark="remarks[index]"
        :options="alloptions[index]"
        :values="allvalues[index]"
        :number="numbers[index]"
        :index="index"
        :id="ids[index]"
        :type="types[index]"
      />
    </div>
    <n-empty description="无答卷数据" v-show="isEmpty" style="margin-top: 20vh">
      <template #extra> 看看别的 </template>
    </n-empty>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import QBox from '../components/QBox.vue';
import { Ques } from '@api/question';

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
});

const id = Number(props.id); //问卷id
const titles = ref([]); //从后端获取的所有题目，每个元素代表一个题目
const remarks = ref([]); //从后端获取的所有题目提示，每个元素代表一个题目
const alloptions = ref([]); //从后端获取的所有题目选项，每个元素代表一个题目
const allvalues = ref([]); //从后端获取的所有题目的选择人数，每个元素代表一个题目
const numbers = ref([]); //从后端获取的所有题目的作答人数，每个元素代表一个题目
const ids = ref([]); //题目id集
const types = ref([]); //对应的题目类型

onMounted(() => {
  getIds();
  handleAnalysis();
});

const isEmpty = ref(false);
const getIds = () => {
  Ques.getIds({
    id: id,
  }).then((res: any) => {
    ids.value = res.data.data.ids;
    types.value = res.data.data.types;
  });
};
const handleAnalysis = () => {
  Ques.analyzeQ({
    id: id,
  }).then((res: any) => {
    console.log('res: ', res);
    if (res.data.status !== 200) {
      isEmpty.value = true;
    } else {
      isEmpty.value = false;
      titles.value = res.data.data.title;
      remarks.value = res.data.data.remark;
      alloptions.value = res.data.data.option;
      allvalues.value = res.data.data.values;
      numbers.value = res.data.data.number;
    }
  });
};
</script>

<style scoped lang="scss">
.q-analysis {
  width: 80%;
  margin: auto;
  border: solid 1px rgb(238, 238, 238);
  border-radius: 1vh;
  background-color: #fff;
  min-height: 60vh;
  box-shadow: 3px 3px 5px #c8c8c8, -3px -3px 5px #ececec;
  // background-color: #f1f1f1;
}
</style>
